<template>
    <el-dialog custom-class="form-dialog" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" destroy-on-close
        width="800px" v-loading="loading" :before-close="handleClose">
        <!-- 表单内容 -->
        <div class="form-dialog-content-box">
            <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm" :size="size">
                <el-form-item label="App名称：" prop="appName">
                    <el-input v-model="form.appName" :size="size" :disabled="title != '新增'"></el-input>
                </el-form-item>
                <el-form-item label="版本号：" prop="version">
                    <el-input v-model="form.version" :size="size" :disabled="title != '新增'"></el-input>
                </el-form-item>
                <el-form-item label="文件名：" prop="fileName">
                    <el-input v-model.number="form.fileName" :size="size" disabled placeholder="上传文件后自动带出"></el-input>
                </el-form-item>
                <el-form-item label="文件路径：" prop="filePath" style="width: 100%;">
                    <el-input v-model="form.filePath" :size="size" disabled placeholder="上传文件后自动带出"></el-input>
                </el-form-item>
                <el-form-item label="文件上传：" style="width: 100%;" v-if="title == '新增'">
                    <el-upload ref="upload" class="upload-demo" drag action="http://127.0.0.1:8089/api/uploads" :limit="1"
                    :on-success="fileUploadSuccess" :on-remove="onRemove">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="更新内容：" prop="content" style="width: 100%;">
                    <el-input v-model="form.content" :size="size" type="textarea" :rows="5"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- 提交区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelBtn" :size="size">取 消</el-button>
            <el-button type="primary" @click="handleSubmitBtn" :size="size">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
//引入混入逻辑
import mixin from '@/mixins/form'
export default {
    name: "formDialog",
    mixins: [mixin],
    props: {
        title: {
            type: String,
            default: "新增"
        }
    },
    data() {
        return {
            form: {
                id: "",
                appName: "",
                version: "",
                fileName: "",
                filePath: "",
                content: "",
                status: 1,
            },//表单数据

            rules: {
                appName: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                version: [
                    { required: true, message: '请输入版本号', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入更新内容', trigger: 'blur' },
                ],
                filePath: [
                    { required: true, message: '请上传更新文件', trigger: 'blur' },
                ]
            },//表单验证规则
        }
    },
    methods: {
        //文件上传成功
        fileUploadSuccess(response, file, fileList){
            //保存文件路径
            this.form.fileName = response.data[0].fileName
            this.form.filePath = response.data[0].filePath
            //移除验证结果
            this.$refs.ruleForm.clearValidate()
        },
        //文件移除
        onRemove(){
            //清空文件路径信息
            this.form.fileName = ""
            this.form.filePath = ""
        },
    },
    computed: {

    }
}
</script>

<style scoped lang="scss">
.form-dialog-content-box {
    .el-form {
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
            width: 50%;
        }
    }
}
</style>